<div class="modal fade rule-edit-modal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" (click)="resetProgress()" (click)="tabActive()" (click)="hideCron()" id="close_btn" class="close" data-dismiss="modal"
          aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" *ngIf="rule.id">编辑</h4>
        <h4 class="modal-title" *ngIf="!rule.id">新增</h4>
      </div>
      <div class="modal-body">
        <!-- Custom Tabs -->
        <div class="nav-tabs-custom">
          <ul class="nav nav-tabs">
            <li class="active" id="tab1"><a href="#tab_1" id="tabOneContent" data-toggle="tab">基础信息</a></li>
            <li id="tab2"><a href="#tab_2" id="tabTwoContent" data-toggle="tab" (click)="hideCron()" (click)="changeTab()">运行脚本</a></li>
            <!-- <li><a href="#tab_3" data-toggle="tab">Tab 3</a></li> -->
          </ul>
          <div class="tab-content">
            <div class="tab-pane active" id="tab_1">
              <form class="form-horizontal" #editForm="ngForm">

                <div class="box-body">
                  <div class="form-group" [class.has-error]="name.valid ===false&&(name.dirty || name.touched)">
                    <label class="col-sm-3 control-label">名称</label>
                    <div class="col-sm-8">
                      <input maxlength="30" pattern="^[A-Za-z0-9_\u4e00-\u9fa5]+$" type="text" #name="ngModel" required [(ngModel)]="rule.name"
                        id="name" name="name" class="form-control" placeholder="请输入名称">
                    </div>

                  </div>
                  <div class="form-group">
                    <label class="col-sm-3 control-label">类型</label>
                    <div class="col-sm-8">
                      <select class="form-control" [(ngModel)]="rule.type" name="type">
                                    <option value="auto">自动</option>
                                    <option value="manual">手动</option>
                                </select>
                    </div>
                  </div>
                  <div class="form-group" [class.has-error]="attempts.valid === false">
                    <label class="col-sm-3 control-label">重试(次)</label>
                    <div class="col-sm-8">
                      <input type="text" pattern="^[0-9]*[1-9][0-9]*$" maxlength="1" #attempts="ngModel" required [(ngModel)]="rule.attempts" name="attempts"
                        class="form-control" placeholder="请输入重试次数">
                    </div>
                  </div>
                  <div class="form-group" [class.has-error]="ttl.valid === false">
                    <label class="col-sm-3 control-label">超时(秒)</label>
                    <div class="col-sm-8">
                      <input type="text" pattern="^[0-9]*[1-9][0-9]*$" maxlength="6" #ttl="ngModel" required [(ngModel)]="rule.ttl" name="ttl"
                        class="form-control" placeholder="请输入超时时间(秒)">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-3 control-label">执行规则</label>
                    <div class="col-sm-8">
                      <input id="cron" class="form-control" [(ngModel)]="rule.cron" name="cron" />
                    </div>
                  </div>
                  <div class="form-group" *ngIf="rule.type=='auto'">
                    <label class="col-sm-3 control-label">是否启用</label>
                    <div class="col-sm-8">
                      <select class="form-control" [(ngModel)]="rule.isActive" name="isActive">
                                    <option value="true">启用</option>
                                    <option value="false">停止</option>
                                </select>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-3 control-label">脚本语言</label>
                    <div class="col-sm-8">
                      <select class="form-control" [(ngModel)]="rule.orderType" name="orderType">
                                    <option selected="selected" value="JavaScript">JavaScript</option>
                                    <!-- <option value="Shell">Shell</option> -->
                                </select>
                    </div>
                  </div>
                </div>
              </form>
            </div>
            <!-- /.tab-pane -->
            <div class="tab-pane" id="tab_2">
              <form class="form-horizontal" #editFormTab2="ngForm">
                <div class="box-body">
                  <div class="form-group">
                    <div class="col-sm-12">
                      <!-- <textarea class="form-control" rows="3" placeholder="请输入脚本" [(ngModel)]="rule.order" name="order"></textarea>  -->
                      <!-- <textarea id="code" class="form-control" rows="3" placeholder="请输入脚本" [(ngModel)]="rule.order" name="order"></textarea> -->
                      <!-- <div id="code"></div> -->
                      <!-- <textarea id="code" #code="ngModel" [(ngModel)]="rule.code" name="code" required>
                      </textarea> -->
                      <textarea id="editor" #code="ngModel" [(ngModel)]="rule.code" name="code"></textarea>
                      <div *ngIf="codeIsNull" class="alert alert-danger" role="alert">代码不能为空！！！</div>
                      <!-- <p class="bg-warning">注意！代码为空时不能保存或运行测试！！！</p> -->
                      <input class="btn btn-warning" type="button" value="运行测试" (click)="runTest()" />
                      <!-- <span class="btn btn-success fileinput-button">
                        <i class="glyphicon glyphicon-plus"></i>
                        <span>上传脚本</span>
                    
                      <input id="fileupload" type="file" name="files[]" multiple>
                      </span>
                      <div id="progress" class="progress">
                        <div class="progress-bar progress-bar-success"></div>
                    </div> -->
                      <div id="files" class="files"></div>
                      <div class="progress progress-xs" style="margin-top:30px">
                        <div *ngIf="testResult" class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="60"
                          aria-valuemin="0" aria-valuemax="100" [style.width.%]="progress_width">
                        </div>
                      </div>
                      <span class="label label-danger pull-right" *ngIf="progress_state=='failed'">运行失败</span>
                      <span class="label label-success pull-right" *ngIf="progress_state=='complete'">运行成功</span>
                      <div *ngIf="progress_state=='failed'">{{testResult.remark}}</div>
                    </div>
                  </div>

                </div>
              </form>
            </div>
            <!-- /.tab-pane -->
            <!-- <div class="tab-pane" id="tab_3">

            </div> -->
            <!-- /.tab-pane -->
          </div>
          <!-- /.tab-content -->
        </div>
        <!-- nav-tabs-custom -->
      </div>
      <div class="modal-footer">
        <button type="button" (click)="hideCron()" class="btn btn-default pull-left" data-dismiss="modal">取消</button>
        <button type="button" id="save_btn" (click)="resetProgress()" (click)="createOrUpdate()" [disabled]="!editForm.form.valid"
          class="btn btn-primary">保存</button>
      </div>

    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
